<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>${alert}
  	<style>
  		.box {
  			width: 50%; height: 50%;
  		}
  		.input-group-addon {
  			background-color: #ffffff;
  			border: 0px;
  		}
  		.title {
  			width: 200px;
  		}
  		.temp {
  			width: 80px;
  		}
  		.alert
		{
		    display: none;
		}
  	</style>
  	<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />
  	<link href="assets/css/prettify.css" rel="stylesheet" />
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">제품 검색</h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">검색조건 펼치기/접기</a>
				<a href="insertProduct.do" class="btn btn-info">등록하기</a>
			</div>
		</div>
		
		<div id="searchdiv">
			<form id="searchProduct" class="form-horizontal" role="form" method="get" action="listProduct.do">
				<fieldset>
				
					<input type="hidden" name="pageCnt" value="${pageCnt}"/>
				
					<div class="clearfix">
					
						<div class="box pull-left">
							<div class="form-group">
								<label for="productTitle" class="col-md-2 control-label">제품명</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="productTitle" autocomplete="off" value="${searchProductTitle}"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="firtCategory" class="col-md-2 control-label">카테고리</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-6 box1">
											<select class="form-control" name="firstCategory">
												<option value="default">- 1차카테고리 -</option>
												<c:forEach items="${first}" var="first">
													<option value="${first.idFirstCategory}" <c:if test="${searchFirstCategory == first.idFirstCategory}">selected</c:if>>${first.firstCategoryText}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-md-6 box2">
											<select class="form-control" name="secondCategory">
												<option value="default">- 1차를 먼저 선택하여 주세요 -</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label for="price1" class="col-md-2 control-label">가격</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="number" class="form-control" name="price1" value="${searchPrice1}">
									<span class="input-group-addon">~</span>
									<input type="number" class="form-control" name="price2" value="${searchPrice2}">
								</div>
							</div>
							
							<div class="form-group">
								<label for="productText" class="col-md-2 control-label">제품설명</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="productText" value="${searchProductText}"/>
								</div>
							</div>
						</div>
						
						<div class="box pull-right">
							<div class="form-group">
								<label for="brand" class="col-md-2 control-label">브랜드</label>
								<div class="col-md-7">
									<select id="selectBox" class="form-control" name="brand">
										<option>--- 선택하세요 ---</option>
										<c:forEach items="${brand}" var="brand">
											<option value="${brand.idBrand}" <c:if test="${searchBrand == brand.idBrand}">selected</c:if>>${brand.brandTitle}</option>
										</c:forEach>
									</select>
								</div>
								<div class="col-md-1">
									<button type="button" id="basic" class="btn btn-default">기본</button>
								</div>
							</div>
							
							<div class="form-group">
								<label for="keyWord" class="col-md-2 control-label">키워드</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="keyWord" value="${searchKeyWord}"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="create_date" class="col-md-2 control-label">등록일</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="date" class="form-control" name="create_date" value="${searchCreate_date}"/>
									<span class="input-group-addon">~</span>
									<input type="date" class="form-control" name="end_date" value="${searchEnd_date}"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="modified_date1" class="col-md-2 control-label">수정일</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="date" class="form-control" name="modified_date1" value="${searchModified_date1}"/>
									<span class="input-group-addon">~</span>
									<input type="date" class="form-control" name="modified_date2" value="${searchModified_date2}"/>
								</div>
							</div>
							
						</div>
						
						<div class="form-group">
							<div class="col-md-offset-2 col-md-8">
								<div class="row">
									<div class="col-md-6">
										<button type="submit" class="btn btn-primary btn-block">검색하기</button>
									</div>
									<div class="col-md-6">
										<button type="reset" class="btn btn-warning btn-block">다시작성</button>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</fieldset>
			</form>
			<hr/>
		</div>
		
		<div class="row">
			<div class="col-md-10">
				<span class="pull-left" style="margin-bottom:10px;">등록 : ${page.totalArticleCount}건 / 활성 : ${display}건 / 비활성 : ${unDisplay}</span>
			</div>
			
			<div class="col-md-1">
				<div class="dropdown clearfix">
					<a id="dropdownMenu2" href="#" role="button" class="dropdown-toggle pull-right" data-toggle="dropdown">정렬순 <b class="caret"></b></a>
					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?order=isProductScore${where}">인기순</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?order=isCreate_date${where}">최신등록순</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?order=isPrice${where}">높은가격순</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?order=isUnPrice${where}">낮은가격순</a></li>
					</ul>
				</div>
			</div>
			
			<div class="col-md-1">
				<div class="dropdown clearfix">
					<a id="dropdownMenu3" href="#" role="button" class="dropdown-toggle pull-right" data-toggle="dropdown">페이징 <b class="caret"></b></a>
					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu3">
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?pageCnt=10${where}${order}">10개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?pageCnt=20${where}${order}">20개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?pageCnt=30${where}${order}">30개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?pageCnt=40${where}${order}">40개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="listProduct.do?pageCnt=50${where}${order}">50개씩</a></li>
					</ul>
				</div>
			</div>
		</div>
				
		
		
		
		
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">제품번호</th>
						<th class="text-center col-md-1 title">제품명</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isBrandTitle'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnBrandTitle${where}">브랜드명 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isBrandTitle${where}">브랜드명 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">1차카테고리</th>
						<th class="text-center col-md-1">2차카테고리</th>
						<th class="text-center col-md-1 temp">
							<c:choose>
								<c:when test="${sort eq 'isImg'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnImg${where}">사진 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isImg${where}">사진 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1 temp">
							<c:choose>
								<c:when test="${sort eq 'isReadCount'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnReadCount${where}">조회 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isReadCount${where}">조회 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1 temp">
							<c:choose>
								<c:when test="${sort eq 'isWishCount'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnWishCount${where}">위시 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isWishCount${where}">위시 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1 temp">
							<c:choose>
								<c:when test="${sort eq 'isPouchCount'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnPouchCount${where}">픽수 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isPouchCount${where}">픽수 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1 temp">
							<c:choose>
								<c:when test="${sort eq 'isCommentCount'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnCommentCount${where}">덧글 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isCommentCount${where}">덧글 ▼</a></c:otherwise>
							</c:choose>
						</th>
						<th class="text-center col-md-1">등록일</th>
						<th class="text-center col-md-1">수정일</th>
						<th class="text-center col-md-1">
							<c:choose>
								<c:when test="${sort eq 'isDisplay'}"><a href="listProduct.do?pageCnt=${pageCnt}&order=isUnDisplay${where}">전시여부 ▲</a></c:when>
								<c:otherwise><a href="listProduct.do?pageCnt=${pageCnt}&order=isDisplay${where}">전시여부 ▼</a></c:otherwise>
							</c:choose>
						</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${product}" var="list">
						<tr class="text-center row">
							<td class="col-md-1">${list.idProduct}</td>
							<td class="col-md-1 title"><a href="updateProduct.do?page=${page.nowPage}&pageCnt=${pageCnt}&id=${list.idProduct}${where}${order}">${list.productTitle}</a></td>
							<td class="col-md-1">${list.idBrandValue}</td>
							<td class="col-md-1 small">
								<c:forEach items="${list.cateList}" var="cate1"><p>${cate1.idFirstCategoryValue}</p></c:forEach>
							</td>
							<td class="col-md-1 small">
								<c:forEach items="${list.cateList}" var="cate2"><p>${cate2.idSecondCategoryValue}</p></c:forEach>
							</td>
							<td class="col-md-1 temp">
								<c:choose>
									<c:when test="${list.productImg != null}">
										<a href="download.jsp?${list.productImg}" data-lightbox="roadtrip" title="${list.productTitle}">
											<span class="glyphicon glyphicon-ok"></span>
										</a>
									</c:when>
									<c:otherwise><span class="glyphicon glyphicon-remove"></span></c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1 temp">${list.readCount}</td>
							<td class="col-md-1 temp">${list.wishCount}</td>
							<td class="col-md-1 temp">${list.pouchCount}</td>
							<td class="col-md-1 temp"><a href="#">${list.commentCount}</a></td>
							<td class="col-md-1 small">${fn:substring(list.create_date, 0, 4)}-${fn:substring(list.create_date, 4, 6)}-${fn:substring(list.create_date, 6, 8)}</td>
							<td class="col-md-1 small">${fn:substring(list.modified_date, 0, 4)}-${fn:substring(list.modified_date, 4, 6)}-${fn:substring(list.modified_date, 6, 8)}</td>
							<c:choose>
								<c:when test="${list.isDisplay == 1}">
									<td class="col-md-1">Y
										<a href="listProduct.do?pageCnt=${pageCnt}&page=${page.nowPage}&id=${list.idProduct}&isDisplay=${list.isDisplay}${where}${order}">
											<button type="button" class="btn btn-xs btn-defalut unDisplay">삭제</button>
										</a>
									</td>
								</c:when>
								<c:otherwise>
									<td class="col-md-1">N
										<a href="listProduct.do?pageCnt=${pageCnt}&page=${page.nowPage}&id=${list.idProduct}&isDisplay=${list.isDisplay}${where}${order}">
											<button type="button" class="btn btn-xs btn-primary display">승인</button>
										</a>
									</td>
								</c:otherwise>
							</c:choose>
							
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="listProduct.do?page=${page.startPage-1}${where}${order}&pageCnt=${pageCnt}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="listProduct.do?page=${now}${where}${order}&pageCnt=${pageCnt}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="listProduct.do?page=${page.endPage+1}${where}${order}&pageCnt=${pageCnt}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>
		
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typehead/jquery.mockjax.js"></script>
    <script src="assets/js/typehead/bootstrap-typeahead.js"></script>
    <script src="assets/js/lightbox-2.6.min.js"></script>
    
    <script>
    	$(function() {
    		$.mockjax({
                url: '/cities/list',
                response: function() {
                	var typehead = $("input[name='productTitle']").val();
                	var asdf = [{ name: '아나다'}, { name: 'Mark'}, { name: 'Jacob'}];
                	$.ajax({
    					url: "ajax/json.jsp",
    					data: "typehead=" + typehead,
    					dataType: "text",
    					timeout: 30000,
    					cache: false,
    					async: false,
    					success: function(req) {
    						asdf = eval(req);
    					},
    					error: function(xhr, status, error) {
    						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
    					}
    				});
                    this.responseText = asdf;
                }
            });

    		$("input[name='productTitle']").typeahead({
                ajax: '/cities/list'
            });
    	});
    </script>
    
	<script type="text/javascript">
		$(function() {
			if ($("select[name='firstCategory'] > option:selected").index() > 0) {
				$("select[name='secondCategory']").empty();
				
				var first = $(this).find("option:selected").val();
				
				$("select[name='thirdCategory'] option").remove();
				$("select[name='thirdCategory']").append("<option value='default'>- 2차를 먼저 선택하여 주세요 -</option>");
				
				$.ajax({
					url: "ajax/first.jsp",
					data: "first=" + first,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idSecondCategory = $(this).find("idSecondCategory").text();
							var secondCategoryText = $(this).find("secondCategoryText").text();
							
							var option = $("<option>").html(secondCategoryText);
							option.attr({'value' : idSecondCategory});
							
							if (idSecondCategory == "${searchSecondCategory}") {
								option.attr({'selected' : "selected"});
							}
							
							$("select[name='secondCategory']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			}
			
			$("select[name='firstCategory']").change(function() {
				$("select[name='secondCategory']").empty();
				
				var first = $(this).find("option:selected").val();
				
				$("select[name='thirdCategory'] option").remove();
				$("select[name='thirdCategory']").append("<option value='default'>- 2차를 먼저 선택하여 주세요 -</option>");
				
				$.ajax({
					url: "ajax/first.jsp",
					data: "first=" + first,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idSecondCategory = $(this).find("idSecondCategory").text();
							var secondCategoryText = $(this).find("secondCategoryText").text();
							
							var option = $("<option>").html(secondCategoryText);
							option.attr({'value' : idSecondCategory});
							
							$("select[name='secondCategory']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
		});
	</script>
	<script>
		$(function() {
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
			
			$(".unDisplay").click(function() {
				if (!confirm("정말 비활성처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$(".display").click(function() {
				if (!confirm("정말 승인처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$("#basic").click(function() {
				$("#selectBox option:eq(0)").attr("selected", "selected");
			});
		});
	</script>
  </body>
</html>